<template>
  <div style="padding:40px;" class="lookboard2" >
    <el-tooltip effect="dark" content="全屏" placement="bottom" style="float: right;margin-top: 10px;margin-right: 20px;display: none">
      <nx-full-screen class="screenfull right-menu-item"></nx-full-screen>
    </el-tooltip>
    <div style="display: inline;margin-left: 20px">
      <span>{{date}}</span>
    </div>
    <div style="display: inline;float: right;margin-right: 20px">
      <span>负责人：{{boardDetail.respMan}}</span>
    </div>
    <div style="text-align: center;margin-top: 10px;margin-bottom: 30px;color: red;font-size: 32px">
      <span>SONGZ • {{boardDetail.name}}</span>
    </div>
    <wh-table :filterPage="false" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option"></wh-table>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import { formatDate } from '@/utils/formatDate'
  import nxFullScreen from '@/components/nx-full-screen/index'
  export default {
    name:'lookboard',
    components: {whTable,nxFullScreen},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        option:{showOperate:false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},

        code:"",
        timer:null,
        date:"",
        boardDetail:{respMan:"",name:""},
        noAutoScroll:false,
        boardTimer:null
      }
    },

    mounted(){
      let self = this;
      self.code = this.$route.query.code;
      if(self.code){
        self.getKuweiList();
      }
      self.timer = setInterval(() => {
        self.date = formatDate(new Date(),"yyyy-MM-dd hh:mm:ss"); // 修改数据date
      }, 1000);

      self.boardTimer = setInterval(() => {
        self.getKuweiList(true);
      }, 10000);
    },

    methods:{

      getKuweiList(noLoad){
        let self = this;
        if(!noLoad){
          self.tableLoading = true;
        }
        self.$http({
          url: "/autoMonitor/position/queryLookBoardDetail",
          method: "post",
          params:{code:self.code}
        }).then(resp => {
          if (resp.success) {
            self.boardDetail = {respMan:"",name:""};
            if(!noLoad){
              self.tableLoading = false;
            }
            self.tableHeader =  [{"columnName": "name", "coloumNameCn": "库位"},
              {"columnName": "gzCode", "coloumNameCn": "工装编号"},
              {"columnName": "productName", "coloumNameCn": "产品名称"},
              {"columnName": "useStatusCn", "coloumNameCn": "库态"},
              {"columnName": "gzStatusCn", "coloumNameCn": "状态"}];
            self.tableData = resp.result;
            if(self.tableData.length > 0){
              let data = self.tableData[0];
              let name = data.gzName||"";
              self.boardDetail.respMan = data.respMan;
              for(let i = 0;i< name.length;i++){
                self.boardDetail.name = self.boardDetail.name+" "+name[i]
              }
            }
          }
        });
      },
    }
  }
</script>
<style>
  .lookboard2 .el-table td, .el-table th.is-leaf{
    background: rgb(242, 242, 242);
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }

  .lookboard2 .el-table__header td, .el-table__header th ,.el-table__row td{
    border-right: 1px solid #ffffff;
  }

  .lookboard2 .el-date-editor.el-input, .lookboard2 .el-date-editor.el-input__inner {
    width: auto;
  }

  .lookboard2 .buttonAdd{
    float: right;
    margin-bottom: 10px;
    padding: 6px 8px;
    margin-right: 5px;
    font-size: 14px;
    border-radius: 4px;
  }
</style>
